<template>
    <div id="app">
        班级名称<el-input v-model="name" placeholder="请输入班级名称" style="width: 150px;"></el-input>
        <!-- 班级名称<el-input v-model="className" placeholder="请输入班级名称" style="width: 150px;" @change="nameChange"></el-input> -->
         状态
        <el-select v-model="statusValue" placeholder="请选择" @change="handleSelectChange">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
        </el-select>
        班级专业
        <el-select v-model="majorclassValue" placeholder="请选择" @click.native="getSysMajorList" @change="majorclassChange">
            <el-option label="全部" value="-1"></el-option>
            <el-option v-for="major in sysMajorList" :key="major.id" :label="major.name" :value="major.id">
                {{ major.name }}
            </el-option>
        </el-select>
        
        <el-button class="an sous" @click="get"><i class="el-icon-search"></i> 搜索</el-button>
        <el-button class="chongz" @click="reset"><i class="el-icon-refresh"></i> 重置</el-button><br>
        <br>
        <br>
        <el-button class="an" @click="showAdd=true"><i class="el-icon-plus"></i> 新增</el-button>
        <el-button class="an" style="width:80px;background-color: #ffdd80;" disabled><i class="el-icon-circle-check"></i> 启用</el-button>
        <el-button class="an" style="width:80px;background-color: #ffdd80;"  disabled><i class="el-icon-circle-close"></i> 停用</el-button>
        <el-button class="an" style="width:100px;background-color: #ffa4a4;"  disabled><i class="el-icon-plus"></i> 设置毕业</el-button>
        <el-button class="an" style="width:130px;background-color: #89e7b3;"  disabled><i class="el-icon-plus"></i> 设置任课老师</el-button>
        <!-- 打开上传对话框的按钮 -->
        <el-button type="primary" @click="openUploadDialog" class="an" style="width:130px;background-color: #13ce66;"><i class="el-icon-plus"></i> 导入班级信息</el-button>
        <div>
            <!-- 上传文件的弹窗 -->
            <el-dialog title="导入班级信息" :visible.sync="uploadDialogVisible" width="40%">

                <!-- 文件上传 -->
                <el-upload action="/sys/class/uploadClassInfo" :on-success="handleSuccess" :before-upload="beforeUpload"
                    :on-error="handleError" :limit="1" accept=".xls,.xlsx" drag>
                    <div slot="tip" class="el-upload__tip">将文件拖到此处，或点击上传</div>
                    <span>{{uploadError}}</span>
                </el-upload>

                <!-- 下载模版链接 -->
                <div style="margin-top: 20px;">
                    <el-link type="primary" @click="downloadTemplate">模版下载</el-link>
                </div>

                <!-- 弹窗的底部操作 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">关闭</el-button>
                </span>
                
            </el-dialog>
        </div>
        <br>
        <br>
        <el-table ref="multipleTable" :data="sysClassList" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号" width="100">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="name" label="班级名称" width="150">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="teacherName" label="班主任" width="150">
                <template slot-scope="scope">{{ scope.row.teacherName }}</template>
            </el-table-column>
            <el-table-column prop="classSize" label="班级人数" width="130">
                <template slot-scope="scope">{{ scope.row.classSize }}</template>
            </el-table-column>
            <el-table-column prop="gradeName" label="班级年级" width="150">
                <template slot-scope="scope">{{ scope.row.gradeName }}</template>
            </el-table-column>
            <el-table-column prop="majorName" label="班级专业" width="130">
                <template slot-scope="scope">{{ scope.row.majorName }}</template>
            </el-table-column>
            <el-table-column prop="create_date" label="创建时间" width="180">
                <template slot-scope="scope">{{ scope.row.createDate }}</template>
            </el-table-column>
            <el-table-column prop="isGraduated " label="是否毕业" width="120">
                <template slot-scope="scope">{{ scope.row.isGraduated === 1? '已毕业' : '未毕业' }}</template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)"></el-switch>
                </template>
                <!-- <template slot-scope="scope">
                    <el-switch :checked="scope.row.status === 1" disabled></el-switch>
                </template> -->
                <!-- <template slot-scope="scope">{{ scope.row.status === 1? '正常' : '已停用' }}</template> -->
            </el-table-column>
            <el-table-column prop="operation" label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" icon="el-icon-edit" style="width: 25px;height: 25px;padding: 2px;" @click="upd(scope.row.id)" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" style="width: 25px;height: 25px;padding: 2px;" @click="del(scope.row.id)" circle></el-button>
                        <el-button type="" icon="el-icon-user" style="width: 25px;height: 25px;padding: 2px;" @click="view(scope.row.id)" circle></el-button>
                        <el-button type="" icon="el-icon-notebook-2" style="width: 25px;height: 25px;padding: 2px;" circle></el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount>=1">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                <el-button><span>{{pageNum}} / {{pageCount}}</span></el-button>
                <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
        </div>
        
        <el-row v-if="showAdd">
            <el-dialog title="添加班级信息" :visible.sync="showAdd" width="30%">
                <el-form :model="form" label-width="90px">
                    
                    <el-form-item label="班级名称">
                        <el-input v-model="className" placeholder="请输入班级名称"  @change="nameChange"></el-input>
                        <span v-if="classError" style="color: red;">{{classError}}</span>
                        <span v-if="nameError" style="color: red;">{{nameError}}</span>
                    </el-form-item>
                    <el-form-item label="班级专业">
                        <el-select v-model="majorValue" placeholder="请选择" @click.native="getSysMajorList" @change="majorChange">
                            <el-option v-for="major in sysMajorList" :key="major.id" :label="major.name" :value="major.id">
                                {{ major.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级年级">
                        <el-select v-model="gradeValue" placeholder="请选择" @click.native="getSysGradeList" @change="gradeChange">
                            <el-option v-for="Grade in sysGradeList" :key="Grade.id" :label="Grade.name" :value="Grade.id">
                                {{ Grade.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班主任">
                        <el-select v-model="teacherValue" placeholder="请选择" @click.native="getSysTeacherList(1)" @change="teacherChange">
                            <el-option v-for="Teacher in sysTeacherList" :key="Teacher.id" :label="Teacher.name" :value="Teacher.id">
                                {{ Teacher.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="助理班主任">
                        <el-select v-model="assistantValue" placeholder="请选择" @click.native="getSysTeacherList(0)" @change="assistantChange">
                            <el-option v-for="Teacher in sysTeacherList" :key="Teacher.id" :label="Teacher.name" :value="Teacher.id">
                                {{ Teacher.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学期">
                        <el-select v-model="detailValue" placeholder="请选择" @click.native="getValueList" @change="detailChange">
                            <el-option v-for="SysDictDetail in sysDictDetailList" :key="SysDictDetail.id" :label="SysDictDetail.dictLabel" :value="SysDictDetail.id">
                                {{ SysDictDetail.dictLabel }}
                            </el-option>
                        </el-select>
                
                    </el-form-item>
                    <el-form-item label="状态">
                        <template>
                            <el-radio v-model="sysClass.radio" label="1" @click.native="radioId(1)">有效</el-radio>
                            <el-radio v-model="sysClass.radio" label="0" @click.native="radioId(0)">停用</el-radio>
                        </template>
                    </el-form-item>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="add">确 定</el-button>
                    <el-button @click="showAdd = false">取 消</el-button>
                </span> 
            </el-dialog>
        </el-row>
        <el-row v-if="showUpd">
            <el-dialog title="修改班级信息" :visible.sync="showUpd" width="30%">
                <el-form :model="form" label-width="90px">
                    
                    <el-form-item label="班级名称">
                        <el-input v-model="sysClass.name" placeholder="请输入班级名称" ></el-input>
                        <span v-if="classNameError" style="color: red;">{{updNameError}}</span>
                        <span v-if="updNameError" style="color: red;">{{updClassNameError}}</span>
                    </el-form-item>
                    <el-form-item label="班级专业">
                        <el-select v-model="majorValue" placeholder="请选择" @click.native="getSysMajorList" @change="majorChange">
                            <el-option v-for="major in sysMajorList" :key="major.id" :label="major.name" :value="major.id">
                                {{major.name }}
                            </el-option>
                        </el-select>
                        <!-- <el-select v-model="form.grade_id" placeholder="请选择">
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="班级年级">
                        <el-select v-model="sysClass.gradeName" placeholder="请选择" @click.native="getSysGradeList" @change="gradeChange">
                            <el-option v-for="Grade in sysGradeList" :key="Grade.id" :label="Grade.name" :value="Grade.id">
                                {{ Grade.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班主任">
                        <el-select v-model="teacherValue" placeholder="请选择" @click.native="getSysTeacherList(1)" @change="teacherChange">
                            <el-option v-for="Teacher in sysTeacherList" :key="Teacher.id" :label="Teacher.name" :value="Teacher.id">
                                {{ Teacher.name }}
                            </el-option>
                        </el-select>
                        <!-- <el-select v-model="form.grade_id" placeholder="请选择">
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="助理班主任">
                        <el-select v-model="assistantValue" placeholder="请选择" @click.native="getSysTeacherList(0)" @change="assistantChange">
                            <el-option v-for="Teacher in sysTeacherList" :key="Teacher.id" :label="Teacher.name" :value="Teacher.id">
                                {{ Teacher.name }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学期">
                        <el-select v-model="sysClass.detail_id" placeholder="请选择" @click.native="getValueList" @change="detailChange">
                            <el-option v-for="SysDictDetail in sysDictDetailList" :key="SysDictDetail.id" :label="SysDictDetail.dictLabel" :value="SysDictDetail.id">
                                {{ SysDictDetail.dictLabel }}
                            </el-option>
                        </el-select>
                
                    </el-form-item>
                    <el-form-item label="状态">
                        <template>
                            <el-radio v-model="sysClass.status" :label="sysClass.status === 1? '1' : '0'" @click.native="updRadioId(1)">有效</el-radio>
                            <el-radio v-model="sysClass.status" :label="sysClass.status === 0? '0' : '1'" @click.native="updRadioId(0)">停用</el-radio>
                        </template>
                    </el-form-item>
                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="updClass">确 定</el-button>
                    <el-button @click="showUpd = false">取 消</el-button>
                </span> 
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
// const http = require('http');
    import axios from 'axios';
    export default {
        name: 'classManagement',
        data() {
            return {
                sysClassList:[],
                status:-1,
                major_id:-1,
                grade_id:'',
                teacher_id:'',
                assistant_id:'',
                detail_id:'',
                isHeadmaster:'',
                majorValue: null,
                pageNum: 1,
                pageSize: 5,
                name:'',
                sysMajorList:[],
                statusValue:null,
                gradeValue:null,
                detailValue:null,
                assistantValue: null,
                teacherValue: null,
                majorclassValue:null,
                pageCount:'',
                id:0,
                showAdd:false,
                showUpd:false,
                form:{
                    
                },
                radio:'',
                sysGradeList:[],
                sysTeacherList:[],
                sysDictDetailList:[],
                className:'',
                sysClass:{},
                classError:false,
                classNameError:false,
                nameError:false,
                updNameError:false,
                uploadDialogVisible: false,
                uploadError:''
            }
        },
        created(){
            this.getSysClassList(1);  
        },
        methods: {
            majorclassChange(majorclassValue){
                this.selectedMajorId = majorclassValue;
                console.log('选中的专业 id：', this.selectedMajorId);
                this.major_id=this.selectedMajorId;
            },
            nameChange(className){
                this.className = className;
                console.log('选中的班级名称：', this.className);
            },
            detailChange(detailValue){
                this.selectedMajorId = detailValue;
                console.log('选中的学期 id：', this.selectedMajorId);
                this.detail_id=this.selectedMajorId;
            },
            majorChange(selectedValue){
                this.selectedMajorId = selectedValue;
                console.log('选中的专业 id：', this.selectedMajorId);
                this.major_id=this.selectedMajorId;
            },
            gradeChange(gradeValue){
                this.selectedGradeId = gradeValue;
                console.log('选中的年级 id：', this.selectedGradeId);
                this.grade_id=this.selectedGradeId;
            },
            teacherChange(teacherValue){
                this.selectedGradeId = teacherValue;
                console.log('选中的班主任 id：', this.selectedGradeId);
                this.teacher_id=this.selectedGradeId;
            },
            assistantChange(assistantValue){
                this.selectedGradeId = assistantValue;
                console.log('选中的助理班主任 id：', this.selectedGradeId);
                this.assistant_id=this.selectedGradeId;
            },
            handleSelectChange(newValue) {
                if (newValue === '全部') {
                    this.statusValue = -1;
                }
                if (newValue === '正常') {
                    this.statusValue = 1;
                }
                if (newValue === '停用') {
                    this.statusValue = 0;
                }
                let status=this.statusValue;
                this.status = status;
            },
            prevPage(){
                this.pageNum--;
                var pageNum = this.pageNum;
                if(this.pageNum >= 1){
                    this.getSysClassList(pageNum);
                }else{
                    this.getSysClassList(1);
                }   
            },
            nextPage(){
                this.pageNum++;
                var pageNum = this.pageNum;
                if(this.pageNum <= this.pageCount){
                    this.getSysClassList(pageNum);
                }else{
                    this.getSysClassList(this.pageCount);
                }                
            },
            getSysClassList(pageNum){
                this.Authorization = localStorage.getItem("Authorization");
                this.pageNum = pageNum;
                console.log("2.pageNum++:"+this.pageNum);
                console.log("this.status:"+this.status);
                
                console.log("name:"+this.name);
                axios({
                    url: 'http://localhost:9002/sys/class/getSysClassList',
                    method: 'post',
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        status:this.status,
                        name:this.name,
                        major_id:this.major_id
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysClassList = response.data.data.sysClassList;
                    this.pageCount = response.data.data.pageCount;
                    console.log(this.sysClassList);
                    console.log("pageCount:"+this.pageCount);
                })
            },
            getSysGradeList(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/grade/getSysGradeList',
                    method: 'post',
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysGradeList = response.data.data;
                    console.log(this.sysGradeList);
                })
            },
            get(){
                let pageNum =this.pageNum;
                this.getSysClassList(pageNum);
            },
            getSysMajorList(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/major/getSysMajorList',
                    method: 'post',
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysMajorList = response.data.data;
                    console.log(this.sysMajorList);
                })
            },
            getSysTeacherList(isHeadmaster){
                this.isHeadmaster = isHeadmaster;
                console.log("isHeadmaster:"+this.isHeadmaster);
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/teacher/getSysTeacherList',
                    method: 'post',
                    params: {
                        isHeadmaster: this.isHeadmaster
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysTeacherList = response.data.data;
                    console.log(this.sysTeacherList);
                })
            },
            reset(){
                this.name = '';
                this.major_id = -1;
                this.statusValue = '';
                this.majorValue = '';
                this.getSysClassList(1);
            },
            // handleSelectionChange() {
            //     // this.multipleSelection = val;
            // },
            // handleStatusChange(status){
            //     console.log("statusValue:"+this.statusValue);
            //     if()
            // },
            radioId(radio){
                this.radio = radio;
                if (this.radio == '1') {
                    this.radio = '1';
                    console.log("有效状态："+this.radio);
                } else if (this.radio == '0') {
                    this.radio = '0';
                    console.log("无效状态："+this.radio);
                }
            },
            updRadioId(radio){
                this.radio = radio;
                if (this.radio == '1') {
                    this.radio = '1';
                    console.log("有效状态："+this.radio);
                } else if (this.radio == '0') {
                    this.radio = '0';
                    console.log("无效状态："+this.radio);
                }
            },
            getValueList(){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/dict/detail/getValueList',
                    method: 'post',
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysDictDetailList = response.data.data;
                    console.log(this.sysDictDetailList);
                })
            },
            add(){
                if(this.className == ''){
                    this.nameError = false;
                    this.nameError='';
                    this.classError = true
                    this.classError = '请输入班级名称';
                    return;
                }
                this.getCountByName(this.className);
                // if(this.className == ''){
                //     this.classError = true;
                //     this.nameError = '请输入班级名称';
                //     return;
                // }
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/class/addSysClass',
                    method: 'post',
                    data: {
                        name: this.className,
                        detail_id: this.detail_id,
                        major_id: this.major_id,
                        grade_id: this.grade_id,
                        teacher_id: this.teacher_id,
                        assistant_id: this.assistant_id,
                        status: this.radio
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        alert("添加成功");
                        this.showAdd= false;
                        this.getSysClassList(1);
                    }else if(response.data.status == 500){
                        alert(response.data.message);
                    }
                })
            },
            getCountByName(className){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/class/getClassByName',
                    method: 'post',
                    params: {
                        name: className
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        this.classError = false;
                        this.nameError = true;
                        this.nameError = '班级名称已存在';
                    }else{
                        this.classError = false;
                    }
                })
                
            },
            show(id){
                console.log("修改："+id);
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url:'http://localhost:9002/sys/class/viewSysClassById',
                    method:'post',
                    params:{
                        id:id
                    },
                    headers:{
                        'Authorization':this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.sysClass=response.data.data;
                    this.majorValue = this.sysClass.majorName;
                    this.grade_id = this.sysClass.gradeId;
                    this.detail_id = this.sysClass.detailId;
                    this.teacher_id = this.sysClass.teacherId;
                    this.assistant_id = this.sysClass.assistantId;
                    this.status = this.sysClass.status;
                    this.teacherValue = this.sysClass.teacherName;
                    this.gradeValue = this.sysClass.gradeName;
                    console.log("major_id:"+this.majorValue);
                })
            },
            upd(id){
                this.id = id;
                console.log("id:"+this.id);
                this.showUpd = true;
                this.show(this.id);
            },
            updClass(){
                if(this.sysClass.name == ''){
                    this.updNameError = false;
                    this.classNameError = true;
                    this.updNameError = '请输入班级名称';
                    return;
                }
                if(this.sysClass.name != ''){
                    this.getUpdCountByName(this.sysClass.name);
                    return;
                }
                console.log(this.sysClass);
                console.log(this.sysClass.name);
                if(this.major_id < 1){
                    this.major_id = this.sysClass.majorId;
                }
                console.log(this.major_id);
                if(this.grade_id < 1){
                    this.grade_id = this.sysClass.gradeId;
                }
                if(this.teacher_id < 1){
                    this.teacher_id = this.sysClass.teacherId;
                }
                // if(this.assistant_id < 1){
                //     this.assistant_id = this.sysClass.assistantId;
                // }
                if(this.radio == ''){
                    this.radio = this.sysClass.status;
                }
                console.log("saa:"+this.grade_id);
                console.log(this.sysClass.teacherName);
                console.log( "xxxxx"+this.sysClass.detailId);
                console.log("teacher_idxxxx"+this.teacher_id)
                console.log("status"+this.radio)
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/class/updClass',
                    method: 'post',
                    data: {
                        // sysClass:this.sysClass,
                        id: this.id,
                        name: this.sysClass.name,
                        majorId: this.major_id,
                        gradeId: this.grade_id,
                        detailId: this.detail_id,
                        teacherId: this.teacher_id,
                        assistantId: this.assistant_id,
                        status: this.radio
                    
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        alert("修改成功");
                        this.showUpd = false;
                        this.getSysClassList(1);
                    }else if(response.data.status == 500){
                        alert(response.data.message);
                    }
                })
            },
            getUpdCountByName(className){
                this.Authorization = localStorage.getItem("Authorization");
                axios({
                    url: 'http://localhost:9002/sys/class/getClassByName',
                    method: 'post',
                    params: {
                        name: className
                    },
                    headers: {
                        'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    if(response.data.status == 200){
                        this.classNameError = false;
                        this.updNameError = true;
                        this.updClassNameError = '班级名称已存在';
                    }else{
                        this.classNameError = false;
                    }
                })
                
            },
            del(id){
                this.id = id;
                console.log("id:"+this.id);
                if(confirm("确定删除？")){
                    this.Authorization = localStorage.getItem("Authorization");
                    axios({
                        url: 'http://localhost:9002/sys/class/delSysClassById',
                        method: 'post',
                        params: {
                            id: this.id
                        },
                        headers: {
                            'Authorization': this.Authorization
                       }
                    })
                    .then(response => {
                        console.log(response);
                        if(response.data.status == 200){
                            alert("删除成功");
                            this.getSysClassList(1);
                        }else if(response.data.status == 500){
                            alert(response.data.message);
                        }
                    })
                }
            },
            handleStatusChange(row) {
                //对应班级的状态数据库进行修改
                if (confirm("是否修改班级状态信息?")){
                    axios({
                        method: "post",
                        url: "http://localhost:9002/sys/class/updStatus",
                        headers: {
                            Authorization: localStorage.getItem("Authorization"),
                        },
                        data: row,
                    })
                        .then((rs) => {
                        console.log("updateStatus", rs.data);
                        })
                        .catch((error) => {
                        console.error("更新状态失败:", error);
                        this.$message.error("更新状态失败，请重试。"); // 显示错误消息
                        });
                }else{
                    if (row.status == 1){
                        row.status = 0;
                    }else{
                        row.status = 1;
                    }
                }
            },

            downloadMo(){
                //下载模版
                var a = document.createElement("a"); //创建一个<a></a>标签
                a.href = "/static/班级导入模板.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
                a.download = "班级导入模版.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
                a.style.display = "none"; // 障眼法藏起来a标签
                document.body.appendChild(a); // 将a标签追加到文档对象中
                a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
                a.remove(); // 一次性的，用完就删除a标签
            },
            // 打开上传对话框
            openUploadDialog() {
                this.uploadDialogVisible = true;
            },

            // 上传成功的处理
            handleSuccess(response, file, fileList) {
                console.log(file);
                console.log(fileList);
                if (response.status === 200) {
                    this.$message.success('班级信息上传成功！');
                } else if (response.data.status === 400 && response.data.length) {
                    // 如果有错误信息，逐行提示
                    response.data.forEach((error) => {
                        this.$message.error(error);
                    });
                } else {
                    this.$message.error('上传失败，请重试。');
                }
            },

            
            // 上传错误的处理
            handleError(err, file, fileList) {
                console.error('上传错误:', err);
                console.error('上传错误文件列表:', fileList);
                console.error('上传错误文件信息:', file);
                this.$message.error('上传过程中出现错误，请稍后重试。');
            },
            beforeUpload(file) {
                const formData = new FormData();
                formData.append('file', file);

                axios.post('http://localhost:9002/sys/class/uploadClassInfo', formData, {
                    headers: {
                        Authorization: localStorage.getItem("Authorization"),
                    }
                }).then(response => {
                    console.log(response);
                    if (response.data.status === 200) {
                        this.$message.success('文件上传成功');
                    } else{
                        this.$message.error('上传失败: ' + response.data.msg);
                        this.uploadError=response.data.data;
                    }
                }).catch(error => {
                    this.$message.error('上传错误: ' + error);
                });

                return false; // 阻止 el-upload 默认上传
            },
            // 模版下载
            downloadTemplate() {
                //下载模版
                var a = document.createElement("a"); //创建一个<a></a>标签
                a.href = "/static/班级导入模板.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
                a.download = "班级导入模版.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
                a.style.display = "none"; // 障眼法藏起来a标签
                document.body.appendChild(a); // 将a标签追加到文档对象中
                a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
                a.remove(); // 一次性的，用完就删除a标签
            },
        }
    }
</script>
<style scoped>
.an{
    background-color: #1890ff;color: white;font-size: 13px;width: 80px;height: 30px;text-align: center;padding-left: 5px;
    padding-right: 5px;padding-top: 8px;
}
.sous{
    margin-left: 20px;
}
.chongz{
    font-size: 13px;width: 80px;height: 30px;text-align: center;padding-left: 5px;
    padding-right: 5px;padding-top: 8px;
    margin-left: 20px;
}
.custom-operation-column.cell {
    background-color: initial;
}

.custom-operation-column.column-label {
    background-color: gray;
}
</style>